<template>
  <div class="app-container over-scroll">
    <el-row :gutter="20" class="mb20">
      <el-col :span="4"><el-input v-model="req._title_" type="text" placeholder="请输入公告标题" @change="search"></el-input></el-col>
      <el-col :span="4"><el-input v-model="req._content_" type="text" placeholder="请输入公告内容" @change="search"></el-input></el-col>
      <el-col :span="4"><el-date-picker style="width:100%;" v-model="req.gmtCreate_" :value-format="`yyyy-MM-dd`" type="date" placeholder="选择日期时间" @change="search"></el-date-picker></el-col>
      <el-col :span="4">
        <el-select style="width: 100%" v-model="req.type" placeholder="请选择类型" clearable @change="search">
          <el-option label="活动" :value="1"></el-option>
          <el-option label="新闻" :value="2"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
      </el-col>
    </el-row>
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip>
        <template slot-scope="{$index}">
          {{$index + 1 + (req.page - 1) * req.pageSize}}
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="type" label="类型" width="120" align="left" :formatter="(row)=>row.type==1?'活动':'新闻'" show-overflow-tooltip></el-table-column>
      <el-table-column prop="content" label="内容" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="gmtCreate" label="发布时间" width="200" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="状态" width="100" align="left" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <el-tag type="success" size="small" v-if="row.status == 1">已发布</el-tag>
          <el-tag type="info" size="small" v-if="row.status == 0">未发布</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="{ row }">
          <el-button @click="edit(row)" type="text" size="small">编辑</el-button>
          <el-button @click="showOrHide(row)" type="text" size="small">{{row.status == 1 ? '下架':'发布'}}</el-button>
          <el-button @click="del(row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList"></Pagination>

    <!-- 弹窗 -->
    <Edit :show.sync="show" :item="current" @confirm="search"></Edit>
  </div>
</template>

<script>
import Edit from "./components/edit.vue";
import { getList, update, del, getDetail } from "@/api/notice";
export default {
  components: {
    Edit,
  },
  data() {
    return {
      show: false,
      current: null,
      list: [],
      total: 0,
      req: {
        orderBy: "id desc",
        page: 1,
        pageSize: 20,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    search() {
      this.req.page = 1;
      this.getList();
    },
    // 获取列表
    getList() {
      getList(this.req).then((res) => {
        this.list = res.data || [];
        this.total = res.total;
      });
    },
    // 添加
    add() {
      this.current = {};
      this.show = true;
    },
    // 删除
    del(row) {
      this.$modal.confirm("确定删除此条数据吗？").then((res) => {
        // 请求服务器删除数据
        del({ id: row.id }).then((res) => {
          // 刷新数据
          this.getList();
        });
      });
    },
    // 上架下架
    showOrHide(row) {
      const text = row.status == 1 ? "下架" : "发布";
      this.$confirm(`是否确认${text}该公告`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await update({
            id: row.id,
            status: row.status == 1 ? "0" : "1",
          });
          if (res.code == 1) {
            this.$message({ type: "success", message: "操作成功!" });
            this.getList();
          } else {
            this.$message({ type: "error", message: res.msg });
          }
        })
        .catch(() => {});
    },
    // 修改
    async edit(row) {
      try {
        const res = await getDetail({ id: row.id });
        if (res.code == 1) {
          this.current = res.data;
          this.show = true;
        } else {
          this.$message({ type: "error", message: res.msg });
        }
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped></style>
